<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between ">
            <span>
                <el-input class="zs-select-md zs-space-right-sm" v-model="orderNum" placeholder="订单编号" clearable disabled />
                <el-input class="zs-select-md zs-space-right-sm" v-model="createUser" placeholder="下单人" clearable
                    disabled />
                <el-input class="zs-select-md zs-space-right-sm" v-model="commodityName" placeholder="商品名称" clearable
                    disabled />
                <el-input class="zs-select-md zs-space-right-sm" v-model="projectName" placeholder="所属项目" clearable
                    disabled />
                <el-input class="zs-select-md zs-space-right-sm" v-model="companyServiceName" placeholder="服务商名称" clearable
                    disabled />
                <el-popover popper-class="dashboard-orderAssayPay-popper" placement="bottom-end" trigger="click">
                    <template #reference>
                        <el-button class="zs-btn-square-solid"
                            :class="{ 'zs-btn-square-solid-active': startDate || endDate }">
                            <el-icon>
                                <MoreFilled />
                            </el-icon>
                        </el-button>
                    </template>
                    <template #default>
                        <div>
                            <el-date-picker class="zs-space-right-sm" v-model="startDate" :type="pickerDate"
                                :teleported="false" placeholder="开始日期" :clearable="true" :value-format="valueFormat"
                                :disabled-date="disabledDateStart" />
                            <el-date-picker class="zs-space-right-sm" v-model="endDate" :type="pickerDate"
                                :teleported="false" placeholder="结束日期" :clearable="true" :value-format="valueFormat"
                                :disabled-date="disabledDateEnd" />
                        </div>
                    </template>
                </el-popover>
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>

                <el-table-column label="付款时间" :align="'center'">
                    <template #default="scope">
                        {{ scope.row.payTimeStr }}
                    </template>
                </el-table-column>
                <el-table-column label="申请单号" :align="'left'">
                    <template #default="scope">
                        {{ scope.row.instanceKey }}
                    </template>
                </el-table-column>
                <el-table-column label="申请金额" :align="'right'">
                    <template #header>
                        <div class="cur-cell">申请金额</div>
                    </template>
                    <template #default="scope">
                        <div class="cur-cell">{{ toThousands(scope.row.payPriceStr) }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="付款单号" :align="'left'">
                    <template #default="scope">
                        {{ scope.row.payNum }}
                    </template>
                </el-table-column>
                <el-table-column label="付款金额" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.payedPriceStr) }}
                    </template>
                </el-table-column>
                <el-table-column label="付款比例" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.payedRatio == '-' ? '-' : `${scope.row.payedRatio}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="是否分账" :align="'center'">
                    <template #default="scope">
                        {{ scope.row.divideAmountFlagStr == 0 ? '否' : scope.row.divideAmountFlagStr == 1 ? '是' : '-' }}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="查看" :align="'right'" width="100">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)"
                            :disabled="scope.row.divideAmountFlagStr == 0">分账</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="zs-text-gray-dark zs-text-sm zs-space-top">*销售额：万元；客流量：万人次；车流量：车次</div> -->
            <div class="zs-space-top-sm zs-table-page-pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
                    :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import detailApi from '@/api/EnterpriseServices/detailPages'
import { ElMessage } from 'element-plus'
import { toThousands } from '@/utils/number-util'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query
const row = JSON.parse(route.row)

const orderNum = ref(row.orderNum)
const createUser = ref(row.createUser)
const commodityName = ref(row.commodityName)
const projectName = ref(row.projectName)
const companyServiceName = ref(row.companyServiceName)
let startDate = ref('')
let endDate = ref('')
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')
const tableData = ref([])

// 分页
const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
    curPageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}

const getList = () => {
    if ((startDate.value && !endDate.value) || (!startDate.value && endDate.value)) {
        ElMessage({
            message: '请选择开始日期和结束日期',
            type: 'warning',
        })
        return false
    }
    detailApi.esPortalOrderPayDetailApi({ orderNum: orderNum.value, payTimeStart: startDate.value, payTimeEnd: endDate.value, pageNum: currentPage.value, pageSize: curPageSize.value }).then((res) => {
    // detailApi.esPortalOrderPayDetailApi({ orderNum: 'DD10000196', payTimeStart: '2023-09-01', payTimeEnd: '2023-09-30', pageNum: currentPage.value, pageSize: curPageSize.value }).then((res) => {
        if (res.data.code == 200) {
            tableData.value = res.data.data.list
            total.value = res.data.data.total
        }
    })
}
getList()

const getData = () => {
    currentPage.value = 1
    getList()
}

const disabledDateStart = (date) => {
    return date.getTime() > new Date().getTime()
}

const disabledDateEnd = (date) => {
    return date.getTime() > new Date().getTime()
}

const goDetail = (curRow) => {
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'page_fenyong_list',
            rTitle: '分账详情',
            code: row.projectCode,
            orderId: curRow.orderId,
            brandName: row.brandName,
            commodityName: row.commodityName,
            companyName: row.companyServiceName,
            id: curRow.payId,
            type: 3
        },
    })
}

</script>


<style lang="scss">
.dashboard-orderAssayPay-popper {
    box-sizing: border-box !important;
    padding: 16px !important;
    width: 1190px !important;
}
.cur-cell {
    width: 120px;
}
</style>
